<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>VwdCms.ImageZoom ASP.NET Server Control</title>
</head>
<body>
    <!--
//---------------------------------------------------
//     Copyright (c) 2007 Jeffrey Bazinet, VWD-CMS 
//     http://www.vwd-cms.com/  All rights reserved.
//---------------------------------------------------
-->
    <form id="form1" runat="server">
    <div>
        <br />
        <center>
            <h1 style="font-family: Verdana; font-size: 1.0em; color: #336699; font-weight: bold;">
                ASP.NET ImageZoom Server Control by <a href="http://www.vwd-cms.com/" title="www.vwd-cms.com">
                    VWD-CMS</a>
            </h1>
            <h2 style="font-family: Verdana; font-size: 0.8em; color: #333333; font-weight: bold;">
                Select an image below:
            </h2>
            <img src="images/hbtn.gif" alt="Wide Image" title="Wide Image" onclick="izImgZoom_setImage('images/horizontal.jpg');"
                onmouseover="this.style.borderColor='red';" onmouseout="this.style.borderColor='silver';"
                style="border: dotted 1px silver; cursor: pointer;" />
            &nbsp;&nbsp;&nbsp;
            <img src="images/vbtn.gif" alt="Tall Image" title="Tall Image" onclick="izImgZoom_setImage('images/vertical.jpg');"
                onmouseover="this.style.borderColor='red';" onmouseout="this.style.borderColor='silver';"
                style="border: dotted 1px silver; cursor: pointer;" />
            <br />
            <table border="0" cellpadding="0" cellspacing="0" style="width: 600px; border: solid 1px silver;">
                <tr style="height: 26px;">
                    <td style="width: 150px; height: 26px; border-right: solid 1px silver;">
                        &nbsp;
                    </td>
                    <td align="left" valign="middle" style="width: 450px; height: 26px;">
                        <div style="padding-left: 5px; height: 26px; background-image: url(images/banner-blue.gif);
                            background-repeat: repeat; background-position: left top;">
                            <img alt="Zoom In" title="Zoom In" src="images/zoomin.gif" onclick="izImgZoom_zoomIn();"
                                style="margin: 6px 3px 4px 3px; width: 16px; height: 16px; border: none; cursor: pointer;" />
                            <img alt="Zoom Out" title="Zoom Out" src="images/zoomout.gif" onclick="izImgZoom_zoomOut();"
                                style="margin: 6px 3px 4px 3px; width: 16px; height: 16px; border: none; cursor: pointer;" />
                            <img alt="Actual Size" title="Actual Size" src="images/actualsize.gif" onclick="izImgZoom_actualSize();"
                                style="margin: 6px 3px 4px 3px; width: 16px; height: 16px; border: none; cursor: pointer;" />
                            <img alt="Best Fit" title="Best Fit" src="images/bestfit.gif" onclick="izImgZoom_bestFit();"
                                style="margin: 6px 3px 4px 3px; width: 16px; height: 16px; border: none; cursor: pointer;" />
                        </div>
                    </td>
                </tr>
                <tr style="height: 3px;">
                    <td style="width: 150px; height: 3px; border-right: solid 1px silver; font-size: 0pt;">
                        &nbsp;
                    </td>
                    <td style="width: 450px; height: 3px; font-size: 0pt;">
                        &nbsp;
                    </td>
                </tr>
                <tr style="height: 400px;">
                    <td align="left" valign="top" style="padding: 0px 5px 0px 5px; width: 150px; height: 400px;
                        border-right: solid 1px silver;">
                        <h1 style="font-family: Verdana; font-size: 1.0em; color: #336699">
                            VWD-CMS ImageZoom Instructions:
                        </h1>
                        <p style="font-family: Verdana; font-size: 0.8em; color: #333333">
                            &bull;&nbsp;Click on the Zoom In icon to increase the size of the image.
                        </p>
                        <p style="font-family: Verdana; font-size: 0.8em; color: #333333">
                            &bull;&nbsp;Click on the Zoom Out icon to reduce the size of the image.
                        </p>
                        <p style="font-family: Verdana; font-size: 0.8em; color: #333333">
                            &bull;&nbsp;Click on the Actual Size icon to return to the original size of the
                            image.
                        </p>
                        <p style="font-family: Verdana; font-size: 0.8em; color: #333333">
                            &bull;&nbsp;Click on the Best Fit icon to see the entire image.
                        </p>
                    </td>
                    <td align="center" valign="middle" style="width: 450px; height: 400px;">
                        <VwdCms:ImageZoom runat="server" ID="izImgZoom" ImageUrl="images/horizontal.jpg"
                            Style="width: 450px; height: 400px; overflow: auto;" />
                    </td>
                </tr>
            </table>
        </center>
    </div>
    </form>
</body>
</html>
